<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <!-- 在 @{}中可以使用${}获取域中的值 -->
        <!--<link rel="stylesheet" th:href="@{${application.proPath}+'/js/ztree/zTreeStyle.css'}"/>-->
        <link href="https://cdn.bootcss.com/layer/2.1/skin/layer.css" rel="stylesheet">
        <link th:href="@{'/js/bootstrap-3.3.7-dist/css/bootstrap.min.css'}" rel="stylesheet">
        <link th:href="@{'/js/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css'}"
              rel="stylesheet">

        <script th:src="@{'/js/jquery/jquery-2.1.1.min.js'}"></script>
        <script th:src="@{'/js/ztree/jquery.ztree.all-3.5.min.js'}"></script>
        <script th:src="@{'/js/bootstrap-3.3.7-dist/js/bootstrap.js'}"></script>
        <script src="https://cdn.bootcss.com/layer/2.1/layer.js"></script>
        <title>ztree menu</title>
    </head>
    <body>
        <div style="text-align: center;">
            <div class="container">
                <p>zteee示例demo</p>
                <div th:text="${application.nams}"></div>
                <div class="row">
                    <div class="col-md-3">
                        <ul id="treeDemo" class="ztree" style="width: 230px; overflow: auto;"></ul>
                    </div>

                    <div class="col-md-3">.col-md-1</div>

                    <div class="col-md-3">
                        <ul id="treeDemo2" class="ztree"></ul>
                    </div>
                </div>

            </div>
        </div>
    </body>
    <script type="text/javascript">
        function addDiyDom(treeId, treeNode) {
            var clasObj = $("#" + treeNode.tId + "_ico")
            clasObj.removeClass().addClass(treeNode.icon)
        }

        //双击后 图标又会变回去
        function zTreeOnDblClick(event, treeId, treeNode) {
            alert(treeNode ? treeNode.tId + ", " + treeNode.name : "isRoot");
        };

        function zTreeOnExpand(event, treeId, treeNode) {
            addDiyDom(treeId, treeNode)
            //layer.msg(treeNode.tId + ", " + treeNode.name + "||" + treeNode.icon);
        };

        function initZtree(tree, url) {
            $.ajax({
                contentType: "application/json;charset=UTF-8",
                //请求地址
                url: url,
                //数据，json字符串 data : JSON.stringify(list),
                //请求成功
                success: function (result) {
                    console.log(result);
                    var setting = {
                        data: {
                            simpleData: {
                                enable: true,
                                //pIdKey: "pid", //java返回来的本来是pId，结果js接收到变成pid小写了|使用fastjson转换
                            },
                        },
                        view: {
                            addDiyDom: addDiyDom,
                            onDblClick: zTreeOnDblClick
                        },
                        callback: {
                            onExpand: zTreeOnExpand, //展开
                            onCollapse: zTreeOnExpand //折叠
                        },
                    };
                    $.fn.zTree.init($("#" + tree), setting, result);
                },
                //请求失败，包含具体的错误信息
                error: function (e) {
                    console.log(e.status);
                    console.log(e.responseText);
                }
            });
        }

        $(document).ready(function () {
            // layer.alert('内容');
            layer.msg('hello');
            initZtree('treeDemo', '[[${application.proPath}]]' + "/menu/all/");
            initZtree('treeDemo2', '[[${application.proPath}]]' + "/menu/allnew/");
        });
    </script>
</html>
